<template>
  <!-- // 表格切换 -->
  <div class="tabType">
    <span
      v-for="(item, index) in tabList"
      :class="['normal', currentIndex == index ? 'active' : '']"
      @click="tabTarget(index)"
    >
      <img :src="item.img" alt="" />
    </span>
  </div>
</template>

<script>
export default {
  // 表格切换
  name: 'TabType',
  data() {
    return {
      currentIndex: 0,
      tabList: [
        {
          title: '',
          img: require('@/assets/img/data_order_type.png'),
          index: 0,
        },
        {
          title: '',
          img: require('@/assets/img/data_order_type1.png'),
          index: 1,
        },
      ],
    };
  },

  mounted() {},

  methods: {
    tabTarget(index) {
      if (this.currentIndex == index) {
        return;
      }
      this.currentIndex = index;
      this.$emit('getIndex', index);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabType {
  width: 78px;
  background-color: #f5f5f5;
  opacity: 1;
  border-radius: 4px;
  display: flex;

  span {
    border-radius: 4px;
    padding: 5px 10px;
    box-sizing: border-box;

    img {
      width: 18px;
      height: 18px;
    }
  }
}

.normal {
  background-color: transparent;
}

.active {
  background-color: rgba(0, 62, 103, 0.39);
}
</style>
